<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/dialog-polyfill/0.4.9/dialog-polyfill.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-lite/1.3.0/material.min.css">
	<link rel="stylesheet" href="assets/css/main.css">
</head>
<body class="layout-transparent">
<div class="mdl-layout mdl-js-layout">
	<header class="mdl-layout__header mdl-layout__header--scroll">
		<div class="mdl-layout__header-row">
			<span class="mdl-layout-title">Title</span>
			<div class="mdl-layout-spacer"></div>
			<nav class="mdl-navigation">
				<a class="mdl-navigation__link" href="">登录</a>
			</nav>
		</div>
	</header>
	<main class="mdl-layout__content">
		<div class="home">
			<div class="title">人机交互项目展示中心</div>
			<div class="text">@大连东软信息学院 16 级 软件工程系 软件 16001-16002 班</div>
			<div class="text">根据项目编号查询相关作品（格式 组长/个人学号 + 题目号）</div>
			<div class="search">
				<form id="search-form" onsubmit="return false;">
					<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
						<label id="search-button" class="mdl-button mdl-js-button mdl-button--icon" for="search-box">
							<i class="material-icons">search</i>
						</label>
						<div class="mdl-textfield__expandable-holder">
							<input class="mdl-textfield__input" type="text" id="search-box">
							<label class="mdl-textfield__label" for="search-box">查询</label>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="works">
			<p class="title">作品</p>
			<div class="works-list">
				<div class="item">
					<div class="mdl-card mdl-shadow--2dp">
						<div class="mdl-card__title mdl-card--expand">
							<h2 class="mdl-card__title-text">标题</h2>
						</div>
						<div class="mdl-card__supporting-text">
							<p>作者：鸡排</p>
							<p>提交于 2018-3-15</p>
						</div>
						<div class="mdl-card__actions mdl-card--border">
							<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">查看</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="mdl-card mdl-shadow--2dp">
						<div class="mdl-card__title mdl-card--expand">
							<h2 class="mdl-card__title-text">标题</h2>
						</div>
						<div class="mdl-card__supporting-text">
							<p>作者：鸡排</p>
							<p>提交于 2018-3-15</p>
						</div>
						<div class="mdl-card__actions mdl-card--border">
							<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">查看</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="mdl-card mdl-shadow--2dp">
						<div class="mdl-card__title mdl-card--expand">
							<h2 class="mdl-card__title-text">标题</h2>
						</div>
						<div class="mdl-card__supporting-text">
							<p>作者：鸡排</p>
							<p>提交于 2018-3-15</p>
						</div>
						<div class="mdl-card__actions mdl-card--border">
							<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">查看</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="mdl-card mdl-shadow--2dp">
						<div class="mdl-card__title mdl-card--expand">
							<h2 class="mdl-card__title-text">标题</h2>
						</div>
						<div class="mdl-card__supporting-text">
							<p>作者：鸡排</p>
							<p>提交于 2018-3-15</p>
						</div>
						<div class="mdl-card__actions mdl-card--border">
							<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">查看</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="mdl-card mdl-shadow--2dp">
						<div class="mdl-card__title mdl-card--expand">
							<h2 class="mdl-card__title-text">标题</h2>
						</div>
						<div class="mdl-card__supporting-text">
							<p>作者：鸡排</p>
							<p>提交于 2018-3-15</p>
						</div>
						<div class="mdl-card__actions mdl-card--border">
							<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">查看</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="mdl-card mdl-shadow--2dp">
						<div class="mdl-card__title mdl-card--expand">
							<h2 class="mdl-card__title-text">标题</h2>
						</div>
						<div class="mdl-card__supporting-text">
							<p>作者：鸡排</p>
							<p>提交于 2018-3-15</p>
						</div>
						<div class="mdl-card__actions mdl-card--border">
							<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">查看</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer class="mdl-mini-footer">
			<div class="mdl-mini-footer--left-section">
				<div class="wrapper">
					<button id="friend_button" class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons">group</i></button>
					<ul id="friend_list" class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="friend_button">
						<li class="mdl-menu__item">友情链接</li>
						<li class="mdl-menu__item"><a href="https://www.bing.com/" target="_blank">16003-16004班展示平台</a></li>
					</ul>
				</div>
			</div>
			<div class="mdl-mini-footer--right-section">Made with love by <a href="http://moyuge.net.cn/" target="_blank">纷羽</a> & <a href="https://blog.sylingd.com" target="_blank">泷涯</a></div>
		</footer>
	</main>
</div>
<div id="toast" class="mdl-js-snackbar mdl-snackbar">
	<div class="mdl-snackbar__text"></div>
	<button class="mdl-snackbar__action" type="button"></button>
</div>
<script src="https://cdn.bootcss.com/material-design-lite/1.3.0/material.min.js"></script>
<script src="https://cdn.bootcss.com/dialog-polyfill/0.4.9/dialog-polyfill.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>